<template>
  <div>
    <Header style="box-shadow: 0 1px 10px 0 #dfdfdf; height:64px; padding:0 28px;">
      <template slot="left">
        <div class="left" @click="drawer = true">
          <i class="el-icon-menu"></i>
        </div>

        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
          <el-breadcrumb-item :to="{ path: '/main' }">我的课堂</el-breadcrumb-item>
          <el-breadcrumb-item>任务管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-drawer :visible.sync="drawer" :direction="'ltr'" size="240px">
          <template slot="title">
            <div style="width: 96px">
              <img src="https://www.ketangpai.com/images/common/logo_blue.png" alt="logo" height="24px">
            </div>
          </template>

          <el-menu class="menu">
            <el-menu-item
                style="width: 100%"
                v-for="item in menu"
                :key="item.route"
            >
              <span>{{ item.name }}</span>
            </el-menu-item>

          </el-menu>
        </el-drawer>
      </template>

      <template slot="right">
        <div class="main-header-right">
          <div v-for ="(item,index) in menu" :key="index" class="header-menu">
            <span>{{item.name}}</span>
          </div>
        </div>
        <RightHeader style="position: absolute; right: 20px; top: 15px;" />
      </template>
    </Header>

  <div class="task-list">
    <!-- 标题和总数 -->
    <div class="task-header">
      <h3>任务列表 <span class="task-count">共{{ totalTasks }}个</span></h3>
    </div>

    <!-- 任务状态标签页 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane :label="`队列中(${number.queueCount || 0})`" name="queued">
        <task-table :data="taskList" v-if="activeTab === 'queued'"/>
      </el-tab-pane>

      <el-tab-pane :label="`进行中(${number.processingCount || 0})`" name="processing">
        <task-table :data="taskList" v-if="activeTab === 'processing'"/>
      </el-tab-pane>

      <el-tab-pane :label="`已完成(${number.completedCount || 0})`" name="completed">
        <task-table :data="taskList" v-if="activeTab === 'completed'"/>
      </el-tab-pane>

      <el-tab-pane :label="`异常任务(${number.errorCount || 0})`" name="error">
        <task-table :data="taskList" v-if="activeTab === 'error'"/>
      </el-tab-pane>
    </el-tabs>
  </div>

  </div>
</template>

<script>
import TaskTable from "@/views/taskManagement/TaskTable.vue";
import Header from "@/components/header/HeaderPage.vue";
import RightHeader from "@/components/header/RightHeader.vue";
import {postRequest} from "@/utils/api";

export default {
  name: 'TaskList',
  components: {RightHeader, Header, TaskTable},
  data() {
    return {
      drawer: false,
      activeTab: 'queued',
      totalTasks: 0,
      number:{
        queueCount: 0,
        processingCount: 0,
        completedCount: 0,
        errorCount: 0,
      },
      taskList: [],
      menu: [
        {
          name: 'ai工具集',
        },
        {
          name:'论文查重',
        },
        {
          name:'任务管理',
        }
      ],
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      this.fetchFirst();
      this.fetchTaskData()
    },
    async fetchFirst(){
      const userInfo = JSON.parse(localStorage.getItem('UserInfo') || '{}');
      const uid = userInfo.id || null;
      console.log("userId:"+uid)
      const res =await postRequest('/taskManagement/number',  { userId: uid }).then(res =>{
        if(res?.data?.code === 200){
          const data=res.data.data || {};
          this.number = {
            queueCount: data.queueCount || 0,
            processingCount: data.processingCount || 0,
            completedCount: data.completedCount || 0,
            errorCount: data.errorCount || 0
          };
          this.totalTasks = this.number.queueCount +
              this.number.processingCount +
              this.number.completedCount +
              this.number.errorCount;
        }else {
          console.error('Failed to fetch task data:', res.data.message);
          this.number = {
            queueCount: 0,
            processingCount: 0,
            completedCount: 0,
            errorCount: 0
          };
          this.totalTasks = 0;
        }
      })
      console.log(res);
      },
    // 获取任务数据
    async fetchTaskData() {
      const params = this.activeTab;
      const userInfo = JSON.parse(localStorage.getItem('UserInfo') || '{}');
      const uid = userInfo.id || null;
      console.log("userId:"+uid)
      const data={ userId: uid, type: params };
      const res =await postRequest('/taskManagement/type', data).then(res =>{
        if(res?.data?.code === 200){
          this.taskList = res.data.data.taskList;
        }else {
          this.totalTasks = 0;
          console.error('Failed to fetch task data:', res.data.message);
        }
      })
      console.log(res);
    },
    // 标签页切换处理
    handleTabClick() {
      this.fetchTaskData()
    },
  }
}
</script>

<style scoped>
.left {
  margin-right: 15px;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}
.task-list {
  margin-top: 5px;
  margin-left: 20%;
  width: 60%;
  padding: 20px;
  background: #fff;
}
.main-header-right{
  display: flex;
  margin-left: 150px;
}
.main-header-right .header-menu{
  display: flex;
  font-size: 16px;
  color: #333;
  margin-left: 20px;
  width: 80px;
}
.task-header {
  margin-bottom: 20px;
}

.task-header h3 {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.task-count {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
  font-weight: normal;
}

</style>
